<template>
  <div>
      <div class="sliding">
          <h2>滑动验证</h2>
          <p class="info" :style="{'color':infoColor}">{{info}}</p>
          <div class="track">
              <div class="progress-bar" :style="{'width':width+'px','background':progressColor}">  
                <div class="slider" :style="{'left':left+'px','background':sliderColor}">
                    <p>{{result}}</p>
                </div>
                <div class="drag-element" draggable="true" @dragstart="dragstart" @dragover="dragover" @dragend="dragend"></div>
              </div>  
          </div>
      </div>
  </div>
</template>

<script>
//滑动拼图验证
const Hashes = require('jshashes');
export default {
    data(){
        return {
            width:50,
            left:0,
            //是否可拖动
            drag:true,
            //判断开始拖动的位置
            dragLocation:false,
            //滑块颜色
            sliderColor:'#ccc',
            //进度条颜色
            progressColor:'#58a849',
            //时间
            timer:'',
            //结果
            result:'',
            //验证信息
            info:'将滑块拖到右边完成验证',
            //验证信息颜色
            infoColor:'#000',
        }    
    },
    methods:{
        //开始拖动
        dragstart(e){
            if(e.offsetX<=50){
                this.dragLocation=true;
                this.timer= new Date().getTime();
            }
        },
        //拖动滑块
        dragover(e){
            if(e.offsetX<=250&&this.drag&&this.dragLocation){
                this.left=e.offsetX;
                this.width=e.offsetX+50;
                if(e.offsetX>245){
                    this.left=250;
                    this.width=300;
                }
            }    
        },
        //拖动完成
        dragend(e){
            if(this.dragLocation){
                if(this.left==250){
                    if(new Date().getTime()-this.timer>300){
                        this.drag=false;
                        this.sliderColor='green';
                        this.result='OK!';
                        this.info='验证成功';
                        this.infoColor='green';
                    }else{
                        this.failure('完成时间太短，验证失败');
                    }
                }else{
                    this.failure('验证失败');
                }
            }    
        },
        //验证失败滑块返回方法
        failure(info){
            //取消可拖动
            this.drag=false;
            this.dragLocation=false;
            //修改颜色和信息
            this.result='NO!';
            this.sliderColor='#cc0000';
            this.progressColor='#990000';
            this.info=info;
            this.infoColor='red';
            setTimeout(()=>{
                //倒退效果
                let time = setInterval(()=>{
                    if(this.left>=10){
                        this.left-=10;
                        this.width-=10;
                    }
                    else{
                        //倒退完成
                        this.left=0;
                        this.width=0;
                        this.result='';                    
                        this.sliderColor='#ccc';
                        this.progressColor='#58a849';
                        this.info='将滑块拖到右边完成验证';
                        this.infoColor='#000';
                        this.drag=true;                    
                        clearInterval(time);
                    }
                },10);
            },500);    
        },
    },
    created(){
        let SHA1 = new Hashes.SHA1;
        let str= '15165161dsafdsaf';
        console.log('SHA1: ' + SHA1.hex(str));
        window.parent.postMessage({
            'event':'changeBox',
            'data':{
            width:'400px',height:'200px'}
            },"*");
    }
}
</script>


<style scoped>
    .sliding{
        box-sizing:border-box;
        width:400px;
        height:200px;
        border:1px solid #ccc;
        background:#fff;
        border-radius:10px;
    }
    /* 验证信息 */
    .info{
        font-size:12px;
    }
    /* 进度容器 */
    .track{
        width:300px;
        height: 50px;
        background:#fff;
        border:1px solid #ccc;
        margin:20px auto 0;
        border-radius:5px;
        position: relative;
    }
    /* 进度条 */
    .progress-bar{
        height:50px;
        border-radius:5px;
    }
    /* 滑块 */
    .slider{
        width:50px;
        height: 50px;
        border-radius:5px;
        position: absolute;
    }
    /* 滑块信息 */
    .slider>p{
        color:#fff;
    }
    .drag-element{
        width:300px;
        height:50px;
        position: absolute;
        top:0;
        left: 0;
        z-index:200;
    }
</style>

